<template>
  <div style="width:100vw;" class="patent-box">
    <!-- <div class="record-header">
      <mt-header fixed title="审核列表">
        <router-link to="/StudyCenter" slot="left">
          <mt-button class="back-butt" icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>-->
    <div>
      <mt-navbar fixed v-model="active">
        <mt-tab-item id="status_0">审核中</mt-tab-item>
        <mt-tab-item id="status_1">审核成功</mt-tab-item>
        <mt-tab-item id="status_2">未通过</mt-tab-item>
      </mt-navbar>
      <div class="page-tab-container">
        <mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>
          <mt-tab-container-item id="status_0">
            <!-- cell组件 -->
            <div class="bscroll" ref="bscroll0">
              <div class="bscroll-container">
                <div class="default-page-box" v-show="applying.length == 0">
                  <div class="default-page">
                    <div class="default-text">哎呀，空空如也!</div>
                  </div>
                </div>
                <div
                  @click="goDetail(item.stuId,0)"
                  v-for="(item,index) in applying"
                  :key="index"
                  class="patent-body"
                >
                  <div class="flex-row parent-body-item">
                    <div :style="`background-image:url(${item.photo || require('@/assets/homePicture/userpicture.png')});`" class="apprentice-img">
                      <!-- <img src="@/assets/homePicture/userpicture.png" alt /> -->
                    </div>
                    <div class="class-content">
                      <p class="content-tip">申请人：{{item.stuName}}</p>
                      <p class="content-time">申请导师：{{item.teaName}}</p>
                      <p class="content-bumen">归属部门：{{item.deptName}}</p>
                    </div>
                    <div class="class-status">待审批</div>
                  </div>
                  <div class="apply-time">申请时间：{{item.applyTime}}</div>
                </div>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="status_1">
            <!-- cell组件 -->
            <div class="bscroll" ref="bscroll1">
              <div class="bscroll-container">
                <div class="default-page-box" v-show="applyed.length == 0">
                  <div class="default-page">
                    <div class="default-text">哎呀，空空如也!</div>
                  </div>
                </div>
                <div
                  @click="goDetail(item.stuId,1)"
                  v-for="(item,index) in applyed"
                  :key="index"
                  class="patent-body"
                >
                  <div class="flex-row parent-body-item">
                    <div :style="`background-image:url(${item.photo || require('@/assets/homePicture/userpicture.png')});`" class="apprentice-img">
                      <!-- <img src="@/assets/homePicture/userpicture.png" alt /> -->
                    </div>
                    <div class="class-content">
                      <p class="content-tip">申请人：{{item.stuName}}</p>
                      <p class="content-time">申请导师：{{item.teaName}}</p>
                      <p class="content-bumen">归属部门：{{item.deptName}}</p>
                    </div>
                    <div class="class-status">审核成功</div>
                  </div>
                  <div class="apply-time">申请时间：{{item.applyTime}}</div>
                </div>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="status_2">
            <!-- cell组件 -->
            <div class="bscroll" ref="bscroll2">
              <div class="bscroll-container">
                <div class="default-page-box" v-show="unapply.length == 0">
                  <div class="default-page">
                    <div class="default-text">哎呀，空空如也!</div>
                  </div>
                </div>
                <div
                  v-for="(item,index) in unapply"
                  :key="index"
                  class="patent-body"
                >
                  <div class="flex-row parent-body-item">
                    <div :style="`background-image:url(${item.photo || require('@/assets/homePicture/userpicture.png')});`" class="apprentice-img">
                      <!-- <img src="@/assets/homePicture/userpicture.png" alt /> -->
                    </div>
                    <div class="class-content">
                      <p class="content-tip">申请人：{{item.stuName}}</p>
                      <p class="content-time">申请导师：{{item.teaName}}</p>
                      <p class="content-bumen">归属部门：{{item.deptName}}</p>
                    </div>
                    <div class="class-status">未通过</div>
                  </div>
                  <div class="apply-time">申请时间：{{item.applyTime}}</div>
                </div>
              </div>
            </div>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { setText } from "../../untils/ddnavigate";
const easydate = require("../../untils/easydate");
export default {
  name: "testUI",
  data() {
    return {
      active: "status_0",
      params: {
        status: 0 //0审批 1通过 2驳回 3.管理员可见审批状态
      },
      applying: [], // 待审核
      applyed: [], // 审批成功
      unapply: [] // 未通过
    };
  },
  mounted() {
    let { params } = this;
    this.$get("qryStuSimpleByStatus", params).then(res => {
      if (res.success) {
        if (res.data.length > 0) {
          res.data.map(function(item) {
            for (var key in item) {
              if (key == "applyTime") {
                let edate = easydate(item[key]);
                item[key] = edate.format("yyyy-MM-dd");
                console.log(item[key]);
              }
            }
          });
        }
        this.applying = res.data;
      }
    });
    // better-scroll初始化
    this.initScroll("bscroll0");
    this.initScroll("bscroll1");
    this.initScroll("bscroll2");
    // 设置标题文字
    setText("审核列表");
  },
  watch: {
    active(oldVal, newVal) {
      let oldVals = oldVal.split("_")[1];
      let { params } = this;
      if (oldVals == 0) {
        params.status = 0;
        this.classFunction(params, "applying");
      } else if (oldVals == 1) {
        params.status = 1;
        this.classFunction(params, "applyed");
      } else if (oldVals == 2) {
        params.status = 2;
        this.classFunction(params, "unapply");
      }
    }
  },
  methods: {
    // 课程状态请求
    classFunction(params, applyStatus) {
      this.$get("qryStuSimpleByStatus", params).then(res => {
        if (res.success) {
          if (res.data.length > 0) {
            res.data.map(function(item) {
              for (var key in item) {
                if (key == "applyTime") {
                  let edate = easydate(item[key]);
                  item[key] = edate.format("yyyy-MM-dd");
                  console.log(item[key]);
                }
              }
            });
          }
          this[applyStatus] = res.data;
        }
      });
    },
    goDetail(id, num) {
      this.$router.push({
        path: "/apprenticeDetail",
        query: { id, statusNum: num }
      });
    },
    initScroll(dom) {
      this.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        this.aBScroll = new BScroll(bscrollDom, {
          click: true
        });
      });
    }
  }
};
</script>
 
<style lang="less" scoped>
@import url("~@/pagecss/my-class.less");
.default-page-box {
  position: relative;
  height: 100vh;
}
.default-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("~@/assets/studyCenter/null.png") 50% 30% no-repeat;
  background-size: 352/75rem 215/75rem;
}
.default-text {
  left: 0;
  right: 0;
  position: absolute;
  top: 45%;
  text-align: center;
  font-size: 30/75rem;
  font-weight: 400;
  color: rgba(110, 176, 246, 0.7);
}
.bscroll-container {
  padding-bottom: 49px;
}
.item {
  display: inline-block;
}

.nav {
  padding: 10px;
}

.link {
  color: inherit;
  padding: 20px;
  display: block;
}
// .mint-navbar.is-fixed {
//   top: 40px;
// }
.page-tab-container {
  padding-top: 49px;
}
.mint-navbar .mint-tab-item.is-selected {
  border-width: 1px;
}
.apprentice-img {
  width: 88/75rem;
  height: 88/75rem;
  margin-top: 10/75rem;
  margin-left: -5px;
  margin-right: 24/75rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: antiquewhite;
  background-position: 50% 50%;
  background-size: cover;
}
.class-content {
  flex: 1 0 auto;
}
.content-time {
  margin-bottom: 15/75rem !important;
}
.parent-body-item {
  padding-bottom: 15/75rem !important;
  border-bottom: 0.5px solid rgba(235, 235, 235, 1);
}
.patent-body {
  background-color: #ffffff;
}
.apply-time {
  padding: 17/75rem 38/75rem;
  font-size: 18/75rem;
  font-weight: 400;
  color: rgba(159, 159, 159, 1);
}
</style>